<template>
	<!-- 我的黑名单 -->
	<view class="blacklist">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="我的黑名单"></tab-top>
		<!-- #endif -->
		<view class="show" v-if="show">
			<image src="/static/bg/noEvaluation.png"></image>
			<view class="show_text">您还没有黑名单</view>
		</view>
		<!-- 酒店端 -->
		<view class="main" v-if="!show && this.isLogin().type == 2">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="box" @tap="blacklist(item)">
					<view class="img"><image :src="item.info.account_info.head_images ||'/static/bg/img.png'"></image></view>
					<view class="content">
						<view class="name">{{ item.info.name }}</view>
						<view class="signature">{{ item.info.say || '暂无签名' }}</view>
						<view class="text">完成 {{ item.info.order_count }}单 粉丝 {{ item.info.fans }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 保洁端 -->
		<view class="main" v-if="!show && this.isLogin().type == 1">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="box" @tap="blacklist(item)">
					<view class="img"><image :src="item.info.hotel_logo"></image></view>
					<view class="content">
						<view class="name">{{ item.info.name }}</view>
						<view class="signature">{{ item.info.hotel_place_abbreviation_name || '暂无地址' }}</view>
						<view class="text">完成 {{ item.info.count }}单 粉丝 {{ item.info.fans }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹层 -->
		<jc-popUp position="bottom" ref="pop" markTapHide="true">
			<view class="footer">
				<view class="item">@{{item.info.name}}</view>
				<view class="item" @tap="total(2)">查看用户主页</view>
				<view class="item" @tap="total(1)">解除黑名单</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
export default {
	data() {
		return {
			show: true,
			list: [],
			avatar: '',
			item:{}
		};
	},
	async onLoad() {
		let host_id;
		if (this.isLogin().type == 1) {
			host_id = this.isLogin().id;
		}else{
			host_id = this.isLogin().hotel_id;
		}
		let [_res, res] = await this.blacklistItem(host_id);
		if (_res || res.data.status == 0) {
			return;
		}
		this.list = res.data.data.list.list;
		this.show = false;
	},
	methods: {
		blacklistItem(host_id) {
			return this.getReq({
				url: 'both/listSetup',
				method: 'GET',
				data: {
					host_id: host_id,
					setup_type: 2,
					app_type: this.isLogin().type,
					page: 1,
					limit: 9999
				}
			});
		},
		blacklist(item) {
			/**
			 * 弹出层
			 */
			this.$refs.pop.show();
			this.item = item;
		},
		async total(e) {
			/**
			 * 解除黑名单
			 */
			if (e == 0) {
				//取消按钮
				this.$refs.pop.hide();
				return;
			}
			if(e == 2){
				/**
				 * 跳转详情
				 */
				console.log(this.item);
				if(this.isLogin().type == 1){
					uni.navigateTo({
						url: '/pages/cleaner/hotel/hotel?id=' + this.item.guest_id
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/hotel/cleaner/cleaner?id=' + this.item.guest_id
				});
				return;
			}
			if(e == 1){
				let [_fans, fans] = await this.attention();
				console.log([_fans, fans]);
				if (_fans || fans.data.status == 0 || fans.data.title == '该保洁已在您关注列表') {
					this.$refs.pop.hide();
					this.showToast('请重试');
					return;
				}
				//删除对应保洁
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].id == this.item.id) {
						this.list.splice(i, 1);
					}
				}
				if (this.list.length == 0) {
					this.show = true;
				}
				this.$refs.pop.hide();
				this.showToast('已解除');
				return;
			}	
		},
		attention() {
			return this.getReq({
				url: 'both/listSetup/' + this.item.host_id,
				method: 'DELETE',
				data: {
					guest_id: this.item.guest_id,
					setup_type: 2,
					app_type: this.isLogin().type
				}
			});
		}
	},
	components: { jcPopUp }
};
</script>

<style scoped lang="scss">
.blacklist {
	.show {
		width: 100%;
		padding: 100upx 116upx;
		box-sizing: border-box;
		position: relative;
		.show_text {
			position: absolute;
			top: 400upx;
			left: 290upx;
			font-size: 24upx;
			color: #999;
		}
		image {
			width: 518upx;
			height: 444upx;
		}
	}
	.main {
		margin-top: 10upx;
		width: 100%;
		padding: 0 24upx;
		box-sizing: border-box;
		.item:nth-last-child(1) {
			border-bottom: 0;
		}
		.item {
			width: 100%;
			height: 180upx;
			border-bottom: 1upx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box {
				display: flex;
				.img {
					width: 120upx;
					height: 120upx;
					margin-right: 34upx;
					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.content {
					line-height: 1;
					.name {
						font-size: 32upx;
					}
					.signature {
						font-size: 24upx;
						line-height: 60upx;
						color: #999999;
					}
					.text {
						font-size: 24upx;
					}
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750upx;
		background-color: #ffffff;
		.item:nth-child(1) {
			font-size: 24upx;
			color: #999999;
			border-bottom: 1upx solid #e5e5e5;
		}
		.item:nth-child(3) {
			border-bottom: 19upx solid #e5e5e5;
		}
		.item {
			height: 100upx;
			line-height: 100upx;
			font-size: 28upx;
			text-align: center;
		}
	}
}
</style>
